<template>
  <div>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column
        align="center"
        label="索引"
        width="300"
        :resizable="false"
        type="index"
        :index="indexMethod"
      >
      </el-table-column>
      <template v-for="(item, index) in columns">
        <el-table-column
          v-if="item.show != false"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align ? item.align : 'center'"
          :width="item.width"
        >
        </el-table-column>
      </template>
      <slot name="table_oper" />
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="text-align: right;margin: 20px 0;"
      :current-page="pager.pageNo"
      :page-size="pager.limit"
      :page-sizes="pager.sizes"
      :total="pager.total"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script setup lang="ts">
  const props = withDefaults(
    defineProps<{
      tableData: [],
      columns: [],
      pager: {
        pageNo: number,
        limit: number,
        sizes: number,
        total: number
      }
    }>(), 
    {
      tableData: [],
      pager: {
        pageNo: 1,
        limit: 1,
        sizes: 1,
        total: 1
      }
    }
  )

  function indexMethod(index) {
    return index + 1
  }

  const emit = defineEmits<{
    (e: 'handleSizeChange', value: string): void
    (e: 'handleCurrentChange', value: string): void
  }>()
  function handleSizeChange(val) {
    emit('handleSizeChange', val)
  }
  function handleCurrentChange(val) {
    emit('handleCurrentChange', val)
  }

</script>

<style scoped>

</style>